<template>
  <div class="container">
    <div class="title">个人中心</div>
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        required
        name="username"
        label="用户名"
        placeholder="请输入用户名"
        :rules="[{ required: true, message: '请填写用户名' }]">
        <template>
          <van-icon slot="left-icon" name="manager-o" size="18" />
          <van-icon slot="right-icon" name="question-o" size="18" @click="toast('用户是admin')"/>
        </template>
      </van-field>
      <van-field
        v-model="password"
        required
        type="password"
        name="password"
        label="密码"
        placeholder="请输入密码"
        :rules="[{ required: true, message: '请填写密码' }]">
        <template>
          <van-icon slot="left-icon" name="edit" size="18" />
          <van-icon slot="right-icon" name="question-o" size="18" @click="toast('密码是123456')"/>
        </template>
      </van-field>
      <div style="margin: 16px">
        <van-button block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { Notify } from 'vant'
export default {
  name: 'user-index',
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    onSubmit (value) {
      if (value.username === 'admin' && value.password === '123456') {
        console.log('登录成功')
        location.href = 'https://m.boxuegu.com/'
      } else {
        Notify('用户名和密码错误，请重新输入')
      }
    },
    toast (value) {
      this.$toast(value)
    }
  }
}
</script>

<style scoped lang="less">
.container {
  height: 667px;
  background-color: rgb(245, 245, 245);
}
.title {
  margin-bottom: 20px;
  width: 100%;
  height: 48px;
  background-color: #fff;
  text-align: center;
  line-height: 48px;
  font-weight: 700;
}
</style>
